為什麼有了 LINE Bot 還需要網頁?

聊天機器人的訊息回覆模式，適合引導式的情境規劃，應用上包含診所掛號、場地預約等，但隨著詢問的流程與內容越來越多，或是體驗過程有許多分支，就會使得訊息互動效率變低。舉例來說，如果希望同時能夠查詢相似課程的評價，或是要對比同一老師的不同課程風格差異，這類型交叉比對的功能就會比較難在瀑布式的聊天訊息中實現，往往會讓使用者頻繁的上下滑動。

若是使用電腦螢幕、平板的使用者，雖然螢幕尺寸比較大，但也因為聊天框的限制，沒有辦法一次瀏覽到較多則的訊息，反而尺寸大沒有成為更好的使用體驗。小生物的課程評價原先也僅有聊天機器人模式，隨著使用者的回饋漸漸發現需要電腦螢幕瀏覽的需求，因此，本篇也會介紹 Django 全端的網頁設計架構，幫助讀者可以知道聊天機器人與網頁的設計差異，也能夠藉此滿足不同的使用情境。

定義需求

• 製作一個能夠讓使用者搜尋課程評價的網頁 (不能太醜)

編寫邏輯

• 定義使用者造訪的網址 at urls.py
• 設定靜態檔案位置 at settings.py
• 編寫渲染網頁邏輯 at views.py
• 編寫 HTML/CSS at static/course_feedback.html
  • 暫時, 避免, 盡量, 忍住, 偷偷的, 不加上 JavaScript，怕負擔太重

定義使用者造訪的網址

首先，先到 hulolo > hulolo > urls.py，urlpatterns 變數中多加上一個 course_feedback，且網址為''，該函式稍後會在 views.py編寫:

# hulolo > hulolo > urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('chatbot', callback),
    
    # 空白 '' 代表其根網址就是評價瀏覽頁面
    path('', course_feedback),
]

設計靜態檔案位置

1. Django 設計中需要在 hulolo > hulolo > settings.py告訴程式有關於網站靜態檔案 (html, js, css 等) 放置位置，在 TEMPLATES 變數中的 key DIRS 代表的是放置靜態檔案的目錄，加上 static

2. 接下來就在 'hulolo' 同一層的位置手動新增一個資料夾名為 static，也創建一個 course_feedback.html 檔案，稍後寫它！
   

編寫渲染網頁邏輯

同樣需要在 hulolo > chatbot > views.py 宣告一個函式，告訴程式當進入網頁版的評價瀏覽頁面時，應該渲染 (render) 什麼樣的內容:

先引入相關函式:

# hulolo > chatbot > views.py
from django.core.paginator import Paginator
from django.shortcuts import render

再宣告 course_feedback 函式變數用於渲染網頁:

# hulolo > chatbot > views.py

def course_feedback(request):
    # 這邊預留一個搜尋的功能
    # 如果輸入了部分課名或老師名，也可以搜尋到
    # 本行是指透過 request.GET.get 抓網址中的 query 參數
    # 例如 query=王小、query=特殊教育
    query = request.GET.get('query', '')  # 取得搜尋參數

    # 如果有搜尋條件，根據課名或老師對資料庫進行過濾
    # icontains 可以做到部分符合的搜尋，| 是「聯集」的意思
    # 代表可以同時搜尋部分符合的老師名或課程名
    if query:
        all_feedback = 
            Course.objects.filter(course_name__icontains=query) |
            Course.objects.filter(teacher_name__icontains=query)
    else:
        # order_by 是一個排序的功能，可以將結果依照 last_updated_time 排序
        # last_updated_time 先前就有編寫在 models.py，忘記了可以往前看!
        all_feedback = Course.objects.all().order_by('-last_updated_time')

    # 有鑑於未來資料數可能會很多，這邊使用 Djnago 內建的
    # Paginator 酷東西進行筆數分頁，每頁顯示 10 則評價
    # 所以我們用 Paginator 把 all_feedback 與每頁顯示筆數包起來
    # 包起來的資料以 paginator 命名
    paginator = Paginator(all_feedback, 10)
    
    # 並接收網址中的 page 參數判斷第幾頁
    page_number = request.GET.get('page')

    # 再把剛剛包起來的 paginator 添上頁數選擇 (page_number) 打包
    # 包起來的資料以 feedback 變數命名
    feedback = paginator.get_page(page_number)

    # 再用 context 字典打包準備回傳
    context = {
        'feedback': feedback,
    }

    # 最後就是使用 render 渲染將 context 渲染到 course_feedback.html
    return render(request, 'course_feedback.html', context)

雖然這個檔案的路徑我們寫在 chatbot APP 資料夾之下，但開發者可以斟酌改創立一個新的 APP，理由是呈現的平台有所不同，本篇因教學方便以及函式複雜度低，仍放置於 chatbot APP。

編寫 HTML/CSS at static/course_feedback.html

上述都是為了撰寫網頁做了參數設定與後端邏輯的準備，下一篇我們會介紹前端網頁的設計邏輯，這邊會先附上course_feedback.html程式碼，可以先將其複製在「設計靜態檔案位置」的空白檔案中，之後會好好的講解它。
course_feedback.html 原始碼

成品預覽

course_feedback.html 所呈現的頁面如圖所示，包含搜尋與顯示評價的各類訊息。

再往前一點點

• Bootstrap 與 React、Vue 都是非常熱門的前端網頁框架，後二者的前期學習曲線較為陡峭，Bootstrap 則非常適合新手了解 HTML/CSS 甚至是 JavaScript 的入門。
• 根網址因不帶有後綴字 (例如 /chatbot)，實務上通常會作為網站的首頁。
• 靜態檔案指的是以 HTML、CSS、JavaScript 前端網頁所使用的檔案格式，在 Django 世界裡會將其放置於 static，部屬時會與其它 .py 程式處理邏輯有所不同。
• request.GET.get 為 GET API 的用法，關於 API 的呼叫有多種方式，此為其中之一。

覆盤

在這篇文章中，我們學會了:

• 設定靜態檔案位置
• 了解 icontains 部分符合搭配聯集「|」的資料查詢用法
• 了解 Django Paginator 多筆資料的分頁處理方式
• 使用 render 將後端資料渲染至前端的方法
• request.GET.get 能夠抓取前端網址的參數
• Day 15 原始碼